<template>
    <el-form
        label-position="left"
        class="myform"
        status-icon
        :model="form"
        ref="refForm"
        :size="formSize"
        :rules="rules"
    >
        <el-form-item label="手机号" prop="phone">
            <el-input :prefix-icon="Phone" v-model="form.phone" type="text" placeholder="请输入手机号" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-row>
                <el-col :span="13">
                    <el-input :prefix-icon="Message" v-model="form.captcha" type="text" placeholder="请输入手机号" autocomplete="off" />                    
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-button type="warning" :disabled="disabled1" v-if="flag" @click="sendCaptcha">发送验证码</el-button>
                    <el-button type="info" disabled  v-else>倒计时 {{time}} S </el-button>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item class="lastitem" >
            <div class="alinks">
                <router-link to="/register" class="litem color">无账号,去注册</router-link>
                <router-link :to="{name:'findpass'}"  class="litem bg">找回密码</router-link>
            </div>
        </el-form-item>

        <el-form-item class="lastitem" >
            <el-button type="primary" @click="submitForm" class="btnblock">验证登录</el-button>
            <el-button type="danger" @click="resetForm" class="btnblock">重置</el-button>
        </el-form-item>
    </el-form>
</template>


<script setup>
import {computed, onMounted, reactive, ref, watch} from 'vue'
import {Avatar, Lock,Phone ,Message } from "@element-plus/icons-vue" //icon图标
import {reg} from '@/utils/validate' //正则
import { ElMessage } from "element-plus"
import {useRouter} from "vue-router"
import {Http} from '@/api'
const router = useRouter()
const form =ref({})
const refForm= ref()
const formSize=ref("default")
const time = ref(120) //定义初始时间
const flag=ref(true)  //验证码初始按钮状态
const disabled = ref(true) //侦听属性
const disabled1 = computed(()=>!reg.phone.test(form.value.phone))  //计算属性

 const rules = reactive({
     phone:[
         {required:true,message:'请输入手机号',trigger:'blur'},
         {pattern:reg.phone , message:'请输入有效的手机号',trigger:'blur'}
     ],
     captcha:[
         {required:true,message:'请输入验证码',trigger:'blur'},
         {pattern:reg.code,message:'请输入4位数字的验证码',trigger:'blur'}
     ]
 })
 
// 重置按钮
const resetForm=()=>{
    refForm.value.resetFields()
}

// 提交按钮
const submitForm = ()=>{
    refForm.value.validate(async  valid=>{
        if(valid){
            // 接口 
            let res = await Http.verifycaptcha(form.value)
            if(res.code==200){
                router.push("/main")
                localStorage.setItem("phone",form.value.phone)
                sessionStorage.setItem("autoToken",res.token) // 存储到本地 转发给服务器 
            }
        }else{
            ElMessage.error('请输入有效的数据信息')
        }
    })
}


// 验证码时间
const timeDoenFunc=()=>{
    flag.value = false;
    time.value --;
     timer = setInterval(()=>{
        //  初始定义的时间 大于0 --
        if(time.value>0){
            flag.value = false;
            time.value--;
        }else{
            clearInterval(timer)
            timer=null;  //时间置空
            flag.value=true;
            time.value=120   //重新开始
        }
    },1000)
}

// 验证码
const sendCaptcha = async ()=>{
    let res = await Http.sentcaptcha({phone:form.value.phone})
    timeDoenFunc()
}

onMounted(()=>{
    const phone = router.currentRoute.value.query.phone
    if(phone){
        form.value.phone=phone
    }else{
        form.value.phone=localStorage.getItem('phone')
    }
    disabled.value= !reg.phone.test(form.value.phone)
})

watch(form.value,(v,oldv)=>{
    console.log(v)
    disabled.value = !reg.phone.test(v.phone)
})

</script>